//在common.js中已经定义全局变量ctx
// function getContextPath() {
//     var pathName = document.location.pathname;
//     var index = pathName.substr(1).indexOf("/");
//     var result = pathName.substr(0,index+1);
//     return result;
// }
// var ctx = getContextPath();
//以下代码未实现【验证码的校验】逻辑

let  loginForm = document.getElementById("loginForm");
let  username = document.getElementById("username");
let  password = document.getElementById("password");
let  password2 = document.getElementById("password2");
let  verify = document.getElementById("verify");
let  registerBtn = document.getElementById("registerBtn");

let usernameReg = /^[0-9A-Za-z]{4,20}$/;   // 4- 20位数字与字母组合
let passwordReg = /^.{6,16}$/;   //6-16位数字与字母组合

function checkUsername() {
    return usernameReg.test(username.value)
}

//检查密码是否满足正则
function checkPasswordReg() {
    return passwordReg.test(password.value)
}

//检查两次输入密码是否一致
function checkPasswordSame() {
    if(password.value === password2.value && password2.value != ""){
        return true;
    }else{
        return false;
    }
}

//username判断逻辑（绑定blur和focus）
username.addEventListener("blur",function () {
    axios({
        method:"get",
        params:{
            method: "checkUsername",
            username:username.value
        },
        url:ctx+"/user"
    }).then(function (resp){
        // console.log(resp.data);
        // console.log(resp.data.result);
        if(resp.data.result=="USERNAME_CAN_USE"){
            //后端验证成功，前端进一步正则表达式验证
            if(checkUsername()){
                username.setAttribute("checkStatus",1);
                verifyImageTip(username.nextElementSibling,imgSuccess);
                verifyResultTip(username.parentElement.nextElementSibling,"");
            }else{
                //正则验证失败
                username.setAttribute("checkStatus",0);
                verifyImageTip(username.nextElementSibling,imgFail);
                verifyResultTip(username.parentElement.nextElementSibling,"用户名不符合规则（用户名由4-20位数字、字母组成）");
            }
        }else{
            //验证失败
            username.setAttribute("checkStatus",0);
            verifyImageTip(username.nextElementSibling,imgFail);
            verifyResultTip(username.parentElement.nextElementSibling,"用户名已经被占用!");
            return false;
        }
    })
});
username.addEventListener("focus",function () {
    verifyResultTip(username.parentElement.nextElementSibling,"");
    verifyImageTip(username.nextElementSibling,imgBlank);    //清空图片
});


//password判断逻辑（绑定blur和focus）
password.addEventListener("blur",function () {

    if(checkPasswordReg()){
        //正则验证通过
        verifyImageTip(password.nextElementSibling,imgSuccess);
        verifyResultTip(password.parentElement.nextElementSibling,"");
    }else{
        //正则验证失败
        verifyImageTip(password.nextElementSibling,imgFail);
        verifyResultTip(password.parentElement.nextElementSibling,"密码不符合规则（长度6-16位）");
    }

});
password.addEventListener("focus",function () {
    verifyResultTip(password.parentElement.nextElementSibling,"");
    verifyImageTip(password.nextElementSibling,imgBlank);    //清空图片
});


//password2判断逻辑（绑定blur和focus）
password2.addEventListener("blur",function () {
    if(checkPasswordSame()){
        //正则验证通过
        password.setAttribute("checkStatus",1);
        verifyImageTip(password2.nextElementSibling,imgSuccess);
        verifyResultTip(password2.parentElement.nextElementSibling,"");
    }else{
        //正则验证失败
        password.setAttribute("checkStatus",0);
        verifyImageTip(password2.nextElementSibling,imgFail);
        verifyResultTip(password2.parentElement.nextElementSibling,"两次输入密码不一致");
    }
});
password2.addEventListener("focus",function () {
    verifyResultTip(password2.parentElement.nextElementSibling,"");
    verifyImageTip(password2.nextElementSibling,imgBlank);    //清空图片
});


verify.addEventListener("input",function () {
// 获取输入的验证码
    let verifyInputByUser = verify.value;
    let len = verifyInputByUser.length;
    if(len===4){
//输入4位就发送请求进行验证
        axios({
            method:"get",
            params:{
                method: "checkCode",
                verify: verify.value
            },
            url:ctx+"/verifyCode"
        }).then(function (resp) {
// console.log(resp.data);
            if(resp.data.result === "VERIFY_PASS"){
//验证通过
                verify.setAttribute("checkStatus",1);
                verifyImageTip(verify.nextElementSibling,imgSuccess);
            }else{
//验证失败
                verify.setAttribute("checkStatus",0);
                verifyImageTip(verify.nextElementSibling,imgFail);
            }
        })
    }else{
//验证失败
        verify.setAttribute("checkStatus",0);
        verifyImageTip(verify.nextElementSibling,imgBlank); //清空图片
    }
});
//注册按钮的单击事件（表单提交）
registerBtn.addEventListener("click",function () {
    username.blur();
    password.blur();
// 【1.提交表单之前，再次进行验证】
    verify.blur();
    let usernameCheckStatus = username.getAttribute("checkstatus");
    let passwordCheckStatus = password.getAttribute("checkstatus");
// 【2.获取验证码的校验状态】
    let verifyCheckStatus = verify.getAttribute("checkstatus");
    if(usernameCheckStatus !=1){
        alert("请检查用户名");
        return false;
    }else if(passwordCheckStatus !=1){
        alert("请检查密码");
        return false;
// 【3.如果验证码校验失败，则不允许提交表单】
    }else if(verifyCheckStatus !=1){
        alert("请输入正确的验证码");
        return false;
    }else{
        axios({
            method:"post",
            params:{
                method: "registerUser",
                username: username.value,
                password: password.value
            },
            url:ctx+"/user"
        }).then(function (resp) {
            console.log(resp.data.result)
            if(resp.data.result === "REGISTER_SUCCESS"){
                alert("注册成功!正在跳转到登录页");
                setTimeout(()=>{
                    location.href=ctx+"/login.jsp"
                },2000);
            }else {
                alert("注册失败!");
            }
        });
    }
});